import { useEffect, useState } from 'react';
import useUrlState from '@ahooksjs/use-url-state';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Spin } from 'antd';

import PageContainer from '@/components/PageContainer';
import request from '@/utils/request';

import { detailColumns } from './constants';
import Overall from './Overall';
import Trend from './Trend';

const StoreDetail = () => {
  const [urlParam] = useUrlState();
  const [storeDetail, setStoreDetail] = useState();

  useEffect(() => {
    request(`/api/url/${urlParam.id}`).then((res) => {
      if (res.success) setStoreDetail(res.data);
    });
  }, [urlParam]);

  return (
    <PageContainer backUrl="/code/store">
      <ProCard>
        <h3 style={{ textAlign: 'center' }}>{storeDetail?.name || '-'}</h3>
        <ProDescriptions dataSource={storeDetail} columns={detailColumns} />
      </ProCard>
      <ProCard
        style={{ marginTop: '10px' }}
        tabs={{
          items: [
            {
              key: 'overall',
              label: '整体指标',
              children: (
                <Spin spinning={!storeDetail}>
                  {storeDetail?.url && <Overall url={storeDetail?.url} />}
                </Spin>
              ),
            },
            {
              key: 'trend',
              label: '趋势分析',
              children: (
                <Spin spinning={!storeDetail}>
                  {storeDetail?.url && <Trend url={storeDetail?.url} />}
                </Spin>
              ),
            },
          ],
        }}
      />
    </PageContainer>
  );
};

export default StoreDetail;
